<template>
	<view class="content">
		<view class="tj-sction">
			<view class="tj-item">
				<text class="num">{{ teamInfo.my_baodan0 || '0' }}</text>
				<text>自己自营区</text>
			</view>
			<view class="tj-item">
				<text class="num">{{ teamInfo.my_baodan1 || '0' }}</text>
				<text>自己消费区</text>
			</view>
			<view class="tj-item">
				<text class="num">{{ teamInfo.my_reward_money || '0' }}</text>
				<text>用户奖励</text>
			</view>
		</view>
		
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item" @click="navTo('/pages/team/invite')">
				<view class="text1">直推({{ teamInfo.invite_num || '0' }})</view>
			</view>
			<view class="cate-item active" @click="navTo('/pages/team/team')">
				<view class="text1">团队({{ teamInfo.team_num || '0' }})</view>
			</view>
		</view>
		
		<view class="team-list">
			<!-- 空白页 -->
			<!-- <empty v-if="loaded === true && teamList.length === 0"></empty> -->
			
			<!-- 人员信息 -->
			<view class="personnel" v-for="(item, index) in teamList" :key="index">
				<!-- 个人图片 -->
				<view class="personnel-left ">
					<image :src="item.headimg || '/static/images/missing-face.png'"></image>
					<text>{{ item.truename || '' }}</text>
					<!-- <text style="color: #ff0000; font-weight: bold;">{{ item.viplevelname || '' }}</text> -->
				</view>
				<!-- 个人信息 -->
				<view class="personnel-right margin">
					<!-- 基本信息 -->
					<view class="personnel-right-a">
						<text>{{ item.mobile || '' }}</text>
						<text class="marginleft">【{{ item.viplevelname || '' }}】</text>
					</view>
					<view class="personnel-right-b">
						<text class="color">注册时间:</text>
						<text class="marginleft">{{ item.addtime_text || '' }}</text>
					</view>
					
					<view class="personnel-right-c">
						<text class="color">自己自营区:</text>
						<text class="marginleft" style="margin-left: 20upx;color: #fa436a;font-weight: bold;">{{ item.my_baodan0 || '0.00' }}</text>
						<text class="marginleft color">自己消费区:</text>
						<text class="marginleft" style="margin-left: 20upx;color: #fa436a;font-weight: bold;">{{ item.my_baodan1 || '0.00' }}</text>
					</view>
					
					<view class="personnel-right-c">
						<text class="color">直推:</text>
						<text class="marginleft">人数{{ item.invite_num || '0' }}</text>
						<text class="marginleft">自营区{{ item.invite_baodan0 || '0.00' }}</text>
						<text class="marginleft">消费区{{ item.invite_baodan1 || '0.00' }}</text>
					</view>
					
					<view class="personnel-right-c">
						<text class="color">团队:</text>
						<text class="marginleft">人数{{ item.team_num || '0' }}</text>
						<text class="marginleft">自营区{{ item.team_baodan0 || '0.00' }}</text>
						<text class="marginleft">消费区{{ item.team_baodan1 || '0.00' }}</text>
					</view>
					
				</view>
			</view>
			
			<uni-load-more :status="loadingType"></uni-load-more>
			
		</view>
		
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
export default {
	components: {
		uniLoadMore,empty
	},
	data() {
		return {
			headerPosition: 'fixed',
			headerTop: '0px',
			
			loaded: false, //数据为加载
			loadingType: 'more', //加载更多状态
			
			token: '',
			userInfo: {},
			teamInfo: {},
			
			teamList: [],
			
			p: 1,
			size: 20,
			count: 0
		};
	},
	onLoad() {
		
	},
	onShow() {
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo({
				url: '/pages/public/login'
			});
			return;
		}
		//获取用户信息
		this.getmedate();
		//获取渠道信息
		this.getteamdate();
		
		this.loadData('refresh');
	},
	onBackPress(options) {
		let self = this;
		if (options.from === 'navigateBack') {
			return false;
		}
		console.log("要指定返回的页面");
		uni.switchTab({
			url: '/pages/user/user'
		})
		return true;
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	//上拉加载更多数据
	onReachBottom() {
		this.loadData();
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//获取用户信息
		async getmedate() {
			const param_userinfo = {
				token: this.token
			};
			await this.$http.request('User', 'userinfo', 'GET', param_userinfo, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.userInfo = res.data.data;
					}
				}
			});
		},
		async getteamdate() {
			const param_userinfo = {
				token: this.token
			};
			await this.$http.request('User', 'teaminfo', 'GET', param_userinfo, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.teamInfo = res.data.data;
					}
				}
			});
		},
		//加载商品 ，带下拉刷新和上滑加载
		async loadData(type = 'add') {
			
			//防止重复加载
			if (this.loadingType === 'loading') {
				return;
			}
			
			//没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else {
				this.loadingType = 'more';
			}

			if (type === 'refresh') {
				this.teamList = [];
				this.p = 1;
				this.count = 0;
				//下拉刷新停止
				uni.stopPullDownRefresh();
			}

			const param = {};
			param.token = this.token;
			param.p = this.p;
			param.size = this.size;
			
			await this.$http.request('User', 'teamlist', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						
						if(res.data.data.count > 0){
							this.teamList = this.teamList.concat(res.data.data.list);
						}
						
						this.p = this.p + 1;
						this.count = res.data.data.count;
						this.loaded = true;
						
						//判断是否还有下一页，有是more  没有是nomore
						if(this.count){
							this.loadingType = this.count <= (this.p - 1) * this.size ? 'nomore' : 'more';
						}else{
							this.loadingType = 'nomore';
						}
						
					}
				}
				
			});
		},
		
	}
};
</script>

<style lang="scss">
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}
	
page,
.content {
	background: #F9F9F9;
}

.marginleft{
	margin-left: 20upx;
}

.tj-sction {
	background: url(/static/images/money_bg.png) no-repeat;
	background-size: cover;
	@extend %section;
	.tj-item {
		@extend %flex-center;
		flex-direction: column;
		height: 140upx;
		font-size: 24upx;
		color: #ffffff;
	}
	.num {
		font-size: $font-lg;
		color: #ffffff;
		margin-bottom: 8upx;
	}
}

/* 分类 */
.cate-section {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 0upx 20upx;
	margin-top: 20upx;
	margin-bottom: 20upx;
	
	.cate-item {
		display: flex;
		flex-direction: column;
		width: 49%;
		align-items: center;
		color: #999999;
		background-color: #fff;
		line-height: 40upx;
		padding: 20upx 0upx;
		border-radius: 20upx;
		
		&:nth-child(2n + 1) {
			margin-right: 2%;
		}
		.text1{
			font-size: 30upx;
			font-weight: bold;
		}
	}
	
	.active{
		background: #fa436a;
		color: #fff;
	}
	
}

.team-list {
	display: block;
	flex-wrap: wrap;
	padding: 0 30upx;
	background: #fff;

	// 人员信息
	.personnel {
		width: 100%;
		height: 290upx;
		display: flex;
		align-items: center;
		border-bottom: 1upx solid #eee;
		
		// 个人图片
		.personnel-left {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			margin-left: 20upx;
			
			image {
				width: 120upx;
				height: 120upx;
				border: 2upx solid #D6D6D6;
				border-radius: 50%;
			}
			text{
				margin-top: 10upx;
				font-size: 24upx;
			}
		}

		// 基本信息
		.personnel-right {
			width: 100%;
			height: 100%;
			padding: 10upx 0;
			margin-left: 50upx;
			
			display: flex;
			flex-direction: column;

			.personnel-right-a {
				margin-top: 20upx;
			}
			
			.personnel-right-b {
				font-size: 24upx;
				margin-top: 20upx;
			}
			
			.personnel-right-c{
				font-size: 26upx;
				margin-top: 20upx;
				line-height: 30upx;
				color: #DD524D;
			}
			
			.personnel-right-d{
				font-size: 24upx;
				margin-top: 20upx;
				line-height: 40upx;
				color: #DD524D;
				
				.color{
					color: #0081FF;
					font-size: 24upx;
					margin-right: 10upx;
					padding: 8upx 10upx;
					border-radius: 10px;
					background-color: #D6D6D6;
				}
				
			}
			
			.personnel-right-e{
				font-size: 24upx;
				margin-top: 20upx;
				line-height: 40upx;
				color: #DD524D;
				
				.color{
					color: #fff;
					font-size: 24upx;
					margin-right: 20upx;
					padding: 8upx 10upx;
					border-radius: 10px;
					background-color: #fa436a;
				}
				
			}
			
		}
	}
}
</style>